<template>

	<view  class="user_edit wap">

		<view class="group group_hd">
			<view class="lab"></view>
			<view class="inp_box">
				<image class="image_user" :src="user.UserImgs" mode="aspectFill" />
			</view>
		</view>
		<view class="group">
			<view class="lab">昵称</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.Name" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">微信号</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.WechatNo" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">首次访问时间</view>
			<view class="inp_box">
				<input type="text" v-model="user.CreateTime" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">注册时间</view>
			<view class="inp_box">
				<input type="text" v-model="user.RegisterTime" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">注册平台</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.UserFrom" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">来源</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.AdChannel" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">最近在线</view>
			<view class="inp_box">
				<input type="text" v-model="user.UpdateTime" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">会员期限</view>
			<view class="inp_box">
				<text>{{ singleTimeString(user.Start_Date)}} 至 {{ singleTimeString(user.End_Date)}}</text>
			</view>
		</view>
		<view class="group">
			<view class="lab">推荐人</view>
			<view class="inp_box" @click="nav_to(`/pages/user/user_visitor?id=${user.P_ID}`)">
				<input type="text" v-model="user.P_Name" disabled />
			</view>
			<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
		</view>
		<view class="group">
			<view class="lab">总点击量</view>
			<view class="inp_box">
				<input type="text" v-model="user.ClickNum" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">总曝光量</view>
			<view class="inp_box">
				<input type="number" v-model="user.ViewNum" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">总点击率</view>
			<view class="inp_box">
				<input type="number" v-model="user.ExposureRate" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">推荐用户数</view>
			<view class="inp_box" @click="nav_to(`/pages/manage/recommend_users?pid=${ID}`)">
				<text>{{user.RecommendRegisterUsers_Num}} / {{user.RecommendUsers_Num}}</text>
			</view>
			<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
		</view>
		<view class="btn m40" @click="$refs['member'].open()">开通会员</view>
		<view class="btn m40" v-if="user.IsRecommend==0" @click="recommend_sub(1)">推 荐</view>
		<view class="btn m40" v-if="user.IsRecommend>=1" @click="recommend_sub(-1)">取消推荐</view>
		<view class="btn m40" @click="unview">首页不显示</view>
		<view class="btn m40" @click="enabled">账号禁用</view>
		<block v-if="is_my_user">
			<view class="btn m40" @click="$refs['setting'].open()">设置代理佣金</view>
			<view class="m40">拉新：{{com.NewUser_Commission}} 消费分成：{{com.F_Commission_Rate}}%
				收礼分成：{{com.T_Commission_Rate}}% </view>

		</block>
		<!-- 开通会员弹出层 -->
		<uni-popup ref="member" type="center">
			<view class="pop_con">
				<view class="hd f1">开通会员</view>
				
				<view class="inp">
					<view class="name">
						会员等级:
					</view>
					<view class="gradeList">
						<view class="grade" v-for="(gradeone,index) in gradeList" :key="index"
							@click="getGrade(gradeone)" :class="{'cycle':gradeone == grade}">
							{{gradeone}}
						</view>
					</view>
				</view>
				<view class="inp">
					<view class="name">
						会员周期:
					</view>
					<view class="gradeList">
						<view class="grade" v-for="(cycleone,index) in cycleList" :key="index"
							@click="getCycle(cycleone)" :class="{'cycle':cycleone == cycle}">
							{{cycleone}}
						</view>
					</view>
				</view>
				<view class="btns">
					<u-button text="取消" @click="$refs['member'].close()"></u-button>
					<u-button type="success" text="确定" @click="recharge"></u-button>
				</view>
				<view class="des">提示：如果该用户已是会员，时间则会累加</view>
			</view>
		</uni-popup>

		<uni-popup ref="setting" type="center">
			<view class="pop_con">
				<view class="hd f1">设置佣金</view>
				<view class="inp">
					<view class="name">
						拉新佣金(元)
					</view>
					<view class="gradeList">
						<input v-model="NewU_Com" type="number" placeholder="请输入">
					</view>

				</view>
				<view class="inp">
					<view class="name">
						消费分成(%，最大15%)
					</view>
					<view class="gradeList">
						<input v-model="Com_Rate" type="number" max="15" placeholder="最大值为15">
					</view>
				</view>
				<view class="inp">
					<view class="name">
						收礼分成(%，最大10%)
					</view>
					<view class="gradeList">
						<input v-model="gift_Com_Rate" type="number" max="10" placeholder="最大值为10">
					</view>
				</view>
				<view class="btns">
					<u-button text="取消" @click="$refs['setting'].close()"></u-button>
					<u-button type="success" text="确定" @click="setting_sub"></u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {

			return {
				user: {},
				gradeList: ['金卡会员', '黑金卡会员'],
				cycleList: ['体验', '一个月', '三个月', '一年'],
				grade: '金卡会员',
				cycle: '体验',
				ID: 0,
				MSort: 99999,

				is_my_user: false,
				Com_Rate: 0,
				gift_Com_Rate: 0,
				NewU_Com: 0,

				com: {}
			};
		},
		methods: {
			singleTimeString(value) {
				var d = Date.parse(value);
				return this.$u.date(d, 'yyyy-mm-dd');
			},
			async setting_sub() {

				let res = await this.$api.post("SaleChannel/SetCommissionInfo", {
					UserID: this.ID,
					NewUser_Commission: this.NewU_Com,
					F_Commission_Rate: this.Com_Rate,
					T_Commission_Rate: this.gift_Com_Rate
				});


				this.$refs['setting'].close();


			},

			getGrade(item) {
				this.grade = item
			},
			getCycle(cycle) {
				this.cycle = cycle
			},
			async recommend_sub(n) {

				let res = await this.$api.post('/Member/SetRecommend', {
					ID: parseInt(this.ID),
					Sort: parseInt(n)
				});

				this.$pv.msg('设置成功');

				let res1 = await this.$api.post('Manage/GetUserData', {
					ID: parseInt(this.ID)
				});
				this.user = res1.data;
			},
			async recharge() {
				const that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认为他开通会员吗',
					confirmText: "确认开通",
					success: async function(res) {
						if (res.confirm) {
							let res = await that.$api.post('/Member/UpgradeUser', {
								ID: that.ID,
								UserType: that.grade,
								UpgradeRemark: that.cycle
							});

							that.$pv.msg('开通成功')

							that.$refs.member.close();
							
							let res1 = await that.$api.post('Manage/GetUserData', {
								ID: parseInt(that.ID)
							});
							that.user = res1.data;
						} else if (res.cancel) {

						}
					}
				});
			},
			getout() {
				this.nav_to(
					`/pages/album/operation?id=${this.ID}`
				)
			},
			async enabled() {

				this.$pv.load('正在处理');


				let res = await this.$api.post('User/Enabled', {
					ID: this.ID
				});
				this.$pv.closeLoad();

				this.$pv.msg('已经禁用');

			},
			async unview() {

				this.$pv.load('正在处理');


				let res = await this.$api.post('User/UnView', {
					ID: this.ID
				});
				this.$pv.closeLoad();

				this.$pv.msg('已取消显示');

			},


		},
		async onLoad(e) {
			this.ID = e.id

			let d = await this.$api.post('Company/IsCompanyAdmin');
			if (!d.data)
				this.nav_back(1500);

			let res = await this.$api.post('Manage/GetUserData', {
				ID: e.id
			});

			this.user = res.data;

			this.MSort = res.data.Sort;

			//如果这个用户是我的下属用户，即该用户的PID==自己的ID
			if (res.data.P_ID == uni.getStorageSync('user').ID) {

				this.is_my_user = true;

				let c_data = await this.$api.post('/SaleChannel/Detail', {
					UserID: this.ID
				});
				this.com = c_data.data;
			} else
				this.is_my_user = false;



		},
		onUnload() {

		}
	};
</script>

<style lang="scss">
	.user_edit {
		padding-bottom: 100rpx;
	}

	.tip {
		margin-top: 32rpx;
		height: 70rpx;
		background: rgba(254, 240, 188, 0.2);
		border-radius: 4rpx;
		color: #fef0bc;
		line-height: 70rpx;
		text-align: center;
	}

	.user_header_btn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		border-radius: 0;
	}

	.user_header,
	.cover_btn {
		border-radius: 10rpx;
		overflow: hidden;
		height: 100rpx;
		width: 100rpx;
		background: rgba(255, 255, 255, 0.1);
		margin-left: 0;
		display: flex;
		// text-align: center;
		justify-content: center;
		align-items: center;

		.iamge_icon {
			height: 60rpx;
			width: 60rpx;
		}

		.image_user {
			height: 100%;
			width: 100%;
		}
	}

	.lab {
		height: 90rpx;
		padding-right: 10rpx;
		color: #fff;
		font-size: 32rpx;
		line-height: 90rpx;

		.msg {
			display: inline-block;
			padding-left: 10rpx;
			font-size: 28rpx;
			color: #dd3232;
		}
	}

	.group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;

		&::after {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: 2rpx;
			content: '';
			transform: scaleY(.6);
			background-color: #404040;
		}

		.inp_box {
			flex: 1;
			display: flex;
			align-items: center;

			input {
				width: 100%;
				text-align: right;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}

		.inp_append {
			margin-left: 8rpx;
		}


	}

	.group_hd {
		height: auto;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.m40 {
		margin-top: 50rpx;
	}

	.group_textarea {
		flex: 1;
		height: 200rpx;
		padding-top: 12rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;

		/deep/ .u-textarea {
			background: none !important;
			// border-bottom: none !important;
			border-color: rgba(64, 64, 64, 1) !important;
			padding-left: 20rpx;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #fff !important;
		}

		/deep/ .u-textarea__field {
			color: #fff !important;
		}
	}



	.inp_box_r {
		display: flex;
		justify-content: flex-end;
	}

	.text_r {
		text-align: right;
	}

	.group_warp {
		padding-bottom: 20rpx;
		display: block;
		height: auto;
	}



	.pop_con {
		//height: 680rpx;
		background: #fff;
		width: 650rpx;
		border-radius: 16rpx;
		border: 1px solid #FEF0BC;

		.hd {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			line-height: 90rpx;
			color: #333;
			font-weight: bolder;
		}
		
		.des{
			height:60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			padding-left: 30rpx;
			color:#be660e;
		}

		.inp {
			margin-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: column;

			.name {
				color: #000;
				height: 60rpx;
				line-height: 60rpx;
				margin-bottom: 10rpx;
			}

			.gradeList {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.grade {
					box-sizing: border-box;
					height: 60rpx;
					width: 160rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
					font-size: 14px;
					color: #333;
					border: 1px solid #FEF0BC;
					margin-left: 12rpx;
				}

				.cycle {
					background-color: #333;
					color: #fff;
				}

				input {
					color: #7c7c7c;
				}
			}

		}

		.btns {
			margin-top: 40rpx;
			display: flex;
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: space-between;

			/deep/ .u-button__text {
				color: #333;
			}

			/deep/ .u-button--success {
				text {
					color: #fff !important;
				}

				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			}

			/deep/ .u-button {
				width: 290rpx;
			}
		}
	}
</style>